<template>
  <div class="m-succession">
    <Header :header="header"></Header>
    <div class="succession-con">
      <Category @scuuesionIndex = classesIndex></Category>
      <div class="connect-tab">
        <ul class="tab-list">
          <li class="tit-name" v-for="(item, index) in tabLit"
          :key = "index" :class="{active: active === index}"
          @click="tabList(index)">
            <p class="num">{{item.num}}</p>
            <p class="name">{{item.name}}</p>
          </li>
        </ul>
        <table class="table">
          <thead class="thead">
            <tr>
              <th>床号</th>
              <th>姓名</th>
              <th>诊断</th>
              <th>记录摘要</th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="(item, index) in patientList" :key="index"
                @click = patientHandler(index)
            >
              <td>{{item.bedNum}}</td>
              <td>{{item.name}}</td>
              <td>{{item.diagnose}}</td>
              <td>{{item.record}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <Floating-Menu :index = $route.query.index></Floating-Menu>
  </div>
</template>

<script>
import Header from '../../publicComponent/Header'
import Category from './Category.vue'
import FloatingMenu from '../../publicComponent/FloatingMenu'
let connectData = require('../../../static/js/data.js')
export default {
  name: 'Succession',
  components: {
    Header,
    Category,
    FloatingMenu
  },
  data () {
    return {
      active: 0,
      patientActive: 0,
      header: {},
      category: ['全天汇总', '白班', '夜班'],
      tabLit: [
        {num: 49, name: '住院总数'}, {num: 3, name: '入院'},
        {num: 4, name: '转入'}, {num: 5, name: '出院'},
        {num: 6, name: '转出'}, {num: 2, name: '手术'},
        {num: 49, name: '预手术'}, {num: 49, name: '病危'},
        {num: 49, name: '死亡'}
      ],
      patientList: []
    }
  },
  mounted () {
    this.patientList = connectData[0].info
  },
  methods: {
    tabList (ind) {
      this.active = ind
    },
    classesIndex (index) {
      this.patientList = connectData[index].info
      this.patientActive = 0
    },
    patientHandler (ind) {
      this.patientActive = ind
    }
  }
}
</script>

<style lang="stylus" scoped>
  .m-succession
    height: 100%
    background-color: #eef2f5
    .succession-con
      // 宽度100% padding-right 会失效 或者添加 box-sizing
      padding: 0 .3rem
      .connect-tab
        height: auto
        background-color: #fff
        .tab-list
          display: flex
          justify-content: space-around
          border-bottom: 1px solid #e8e9ee
          box-sizing: border-box
          text-align: center
          .active
            color: #1090eb
            border-bottom: 2px solid #1090eb
          .tit-name
            height: .96rem
            line-height: .48rem
            margin-bottom: -1px
            .num
              font-size: .42rem
            .name
              font-size: .24rem
        .table
          display: inline-block
          text-align: center
          margin: .36rem
          .thead
            display: table
            width: 100%
            table-layout: fixed
            height: .56rem
            line-height: .56rem
            font-size: .24rem
            background-color: #edeef0
            color: #41474e
          .tbody::-webkit-scrollbar
              display: none
          .tbody
            display: inline-block
            overflow-y: auto
            // box-sizing: border-box
            height: 6.2rem
            width: 100%
            .active
              background-color: #1086eb38
            tr
              display: table
              table-layout:fixed;
              width: 100%
              height: .62rem
              line-height: .62rem
              border-bottom: 1px solid #e8e9ee
              font-size: .2rem
              color: rgb(108, 117, 128)
              &:last-child
                border-bottom: 0px
</style>
